var menu = [];//For dynamic presentation of categorys
var display_level = ['', 'easy', 'medium', 'hard', 'random'];
/****************************
*Function name: update
*Description: For button onclick. 
        Passing the question information to the backend for update.
        If the update is successful, it gives a success message and 
        jumps back to the questionManage page
*Parameters: null
*Return: null
*******************************/
function update(){
    var category = document.getElementById("editable-select").value == 'old' ? document.getElementById('old_category').value : document.getElementById('new_category').value;
    var level = document.getElementById("difficulty_level").value;
    var property = document.getElementById("creator").value;
    var question = document.getElementById("qst").value;
    var answer = document.getElementById("ans").value;
    let data = {id:JSON.parse(localStorage.getItem('question_detail'))['id'], category:category, level:level, question:question, answer:answer, property:property}; 
    
    function ok(){
        console.log(this.responseText);
        if(this.responseText == "success"){
            alert("update successful!");
            window.location.href = "../html/questionmanage.html";
            localStorage.removeItem('question_detail');
        }else{
            alert(this.responseText);
        }
    }
    function ko(){
        alert("Something wrong with login");
    }
    ajaxRequest("../php/updatequz.php",'post',data,ok,ko);
    
}
/****************************
*Function name: isLogin
*Description: Adjust the content of the navigation bar.
*Parameters: null
*Return: null
*******************************/
function isLogin(){
    if(localStorage.hasOwnProperty("UserName")){
        document.getElementById("login").style.display = 'none';
        document.getElementById("login-out").style.display = 'block';
        document.getElementById("profile").style.display = 'block';
        document.querySelector("#profile a").innerHTML = 'User: ' + localStorage.getItem('UserName');
    }
    else{
        document.getElementById("login-out").style.display = 'none';
        document.getElementById("login").style.display = 'block';
        document.getElementById("profile").style.display = 'none';
    }
}
/****************************
*Function name: showQuesDetail
*Description: Show details of the question.
        Display the selected question information 
        on the interface and automatically fill in the form.
*Parameters: null
*Return: null
*******************************/
function showQuesDetail() {
    let old_cat_menu = document.getElementById("old_category");
    for (var i = 0; i < menu.length; i++) {
        var option = document.createElement("option");
        option.setAttribute('value', menu[i]);
        option.innerHTML = menu[i];
        old_cat_menu.appendChild(option);
    }

    data = JSON.parse(localStorage.getItem('question_detail'));
    var htmlStr = "<tr>";
    htmlStr += "<td>" + data.category + "</td>";
    htmlStr += "<td>" + display_level[data.level] + "</td>";
    if(data.property==null || data.property == 0){
        htmlStr += "<td>" +" Public" + "</td>";
    }else{
        htmlStr += "<td>" + "Private" + "</td>";
    }

    htmlStr += "<td>" + data.question + "</td>";
    htmlStr += "<td>" + data.answer + "</td>";
    htmlStr += "</tr>";
    document.getElementById("tBody").innerHTML = htmlStr;
    
    //Automatic form filling
    document.getElementById("old_category").value = data.category;
    document.getElementById("difficulty_level").value = data.level;
    document.getElementById('creator').value = data.property;
    document.getElementById("qst").innerHTML = data.question;
    document.getElementById("ans").value = data.answer;
}
/****************************
*Function name: ok
*Description: Set category content on the front-end and 
            display the content of the question.
*Parameters: null
*Return: null
*******************************/
function ok() {
    console.log(this.responseText);
    let json_string = this.responseText;
    let res_object = JSON.parse(json_string);
    for (var i = 0; i < res_object.length; i++) {
        menu.push(res_object[i].category);
    }

    let old_cat = document.getElementById('old_category');
    let new_cat = document.getElementById('new_category');
    let cat_select = document.getElementById('editable-select');

    new_cat.style.display = 'none';
    cat_select.addEventListener('change', function () {
        if (cat_select.value == 'old') {
            old_cat.style.display = 'block';
            new_cat.style.display = 'none';
        } else if (cat_select.value == 'new') {
            old_cat.style.display = 'none';
            new_cat.style.display = 'block';
        } else {
            old_cat.style.display = 'none';
            new_cat.style.display = 'none';
        }
    })
    showQuesDetail();
}
function ko() {
    console.log(this.responseText);
    alert("Something wrong with get category");
}

/****************************
*Function name: getCategoy
*Description: Loading category contents.
    function ok: If successful, the question should be displayed.
    function ok: If it fails, an alert message should be given.
*Parameters: null
*Return: null
*******************************/
function getCategoy() {
    ajaxRequest("../php/getCategory.php", 'get', null, ok, ko);
}

window.onload = function(){
    isLogin();
    getCategoy();
}